<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级与行内元素转换</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        /* 原始块级元素 */
        .original-block {
            background-color: #f0f8ff;
            border: 1px solid blue;
            margin: 10px 0;
        }
        
        /* 转换为行内元素的块级元素 */
        .block-to-inline {
            display: inline;
            background-color: #fff0f5;
            border: 1px solid red;
            margin: 10px;
        }
        
        /* 原始行内元素 */
        .original-inline {
            background-color: #f0fff0;
            border: 1px solid green;
        }
        
        /* 转换为块级元素的行内元素 */
        .inline-to-block {
            display: block;
            background-color: #fffacd;
            border: 1px solid orange;
            margin: 10px 0;
        }
        
        /* 转换为行内块级元素的元素 */
        .inline-block {
            display: inline-block;
            width: 150px;
            height: 80px;
            background-color: #f5f5dc;
            border: 1px solid purple;
            margin: 10px;
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }
        
        /* 隐藏元素 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>块级与行内元素转换</h1>
    
    <div class="container">
        <h2>原始块级元素</h2>
        <div class="original-block">这是一个块级元素 (div)</div>
        <div class="original-block">这是另一个块级元素 (div)</div>
        <p class="original-block">这是一个块级元素 (p)</p>
    </div>
    
    <div class="container">
        <h2>转换为行内元素的块级元素</h2>
        <div class="block-to-inline">这是一个转换为行内元素的块级元素 (div)</div>
        <div class="block-to-inline">这是另一个转换为行内元素的块级元素 (div)</div>
        <p class="block-to-inline">这是一个转换为行内元素的块级元素 (p)</p>
    </div>
    
    <div class="container">
        <h2>原始行内元素</h2>
        <span class="original-inline">这是一个行内元素 (span)</span>
        <span class="original-inline">这是另一个行内元素 (span)</span>
        <a href="#" class="original-inline">这是一个行内元素 (a)</a>
    </div>
    
    <div class="container">
        <h2>转换为块级元素的行内元素</h2>
        <span class="inline-to-block">这是一个转换为块级元素的行内元素 (span)</span>
        <span class="inline-to-block">这是另一个转换为块级元素的行内元素 (span)</span>
        <a href="#" class="inline-to-block">这是一个转换为块级元素的行内元素 (a)</a>
    </div>
    
    <div class="container">
        <h2>转换为行内块级元素的元素</h2>
        <div class="inline-block">行内块级元素1</div>
        <div class="inline-block">行内块级元素2</div>
        <div class="inline-block">行内块级元素3</div>
    </div>
    
    <div class="container">
        <h2>隐藏元素</h2>
        <div>这个元素是可见的</div>
        <div class="hidden">这个元素被隐藏了</div>
        <div>这个元素也是可见的</div>
    </div>
</body>
</html>